<template>
	<view class="order" v-if="detail">
		<view class="top">
			<view class="top_t">
				商品信息
			</view>
			<view class="top_content" @click="$pageTo(`/pages/index/details?id=${detail.ticket.id}`)">
				<view class="c_left">
					<view class="l_img">
						<image v-if="detail.ticket.image" :src="httpimg + detail.ticket.image" mode="aspectFill"></image>
					</view>
					
				</view>
				<view class="c_right">
					<view class="l_text">
						<view class="text_top">
							{{detail.ticket.title}}
						</view>
						<view class="text_bottom">
							{{detail.spec}}
						</view>
					</view>
					<view class="">
						<view class="c_money">
							<text>￥</text>{{detail.oneprice}}
						</view>
						<view class="c_num">
							<text>x</text>{{detail.number}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="msg">
<view class="msg_list">
				<view class="m_left">
					订单号
				</view>
				<view class="m_right">
					{{detail.orderno}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					订单状态
				</view>
				<view class="m_right">
					{{status[detail.status]}}
				</view>
			</view>
			
			<view class="msg_list">
				<view class="m_left">
					使用日期
				</view>
				<view class="m_right">
					{{detail.daytime}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					联系人
				</view>
				<view class="m_right">
					{{detail.contactname}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					联系电话
				</view>
				<view class="m_right">
					{{detail.contactphone}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					身份证号
				</view>
				<view class="m_right">
					{{detail.id_card}}
				</view>
			</view>
		</view>
		<view class="msg" v-if="detail.status==2||detail.status==3">
			<view class="title">
				凭证码：{{detail.orderno}}
			</view>
			<view class="code">
				<image v-if="detail.verifyimg" :src="http+detail.verifyimg" mode=""></image>
			</view>
		</view>
		<view class="msg" v-if="detail.status==2||detail.status==3">
			<view class="msg_list">
				<view class="m_left">
					订单编号
				</view>
				<view class="m_right">
					{{detail.orderno}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					支付时间
				</view>
				<view class="m_right">
					{{detail.paytime>1?$formatDate(detail.paytime*1000):''}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					支付方式
				</view>
				<view class="m_right">
					{{arr[detail.paytype]}}
				</view>
			</view>
		</view>

		<view class="bottom" v-if="detail.status==1">
			<view class="b_box">
				<view class="b_money">
					<view class="">
						订单金额：
					</view>
					<view class="">
						<span>￥</span>
						<text>
							{{detail.allprice}}
						</text>
					</view>
				</view>
				<view class="btns">
					<view class="b_btn" @click="toPay">
						继续支付
					</view>
					<view class="b_btn2" @click="toDel">
						取消订单
					</view>
				</view>
			</view>
		</view>

		<view class="msg"
			v-if="detail.status==3 || detail.status==8 ||detail.status==9 ||detail.status==10||detail.status==11 ||detail.status==12 ||detail.status==13">
			<view class="msg_list">
				<view class="m_left">
					收件人<text>*</text>
				</view>
				<view class="m_right">
					{{detail.receive_name}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					手机号<text>*</text>
				</view>
				<view class="m_right">
					{{detail.receive_mobile}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					收件人地址<text>*</text>
				</view>
				<view class="m_right">
					{{detail.receive_address}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					作品编号<text>*</text>
				</view>
				<view class="m_right">
					{{detail.work_num}}
				</view>
			</view>
			<view class="msg_list2">
				<view class="m_left">
					作品图片<text>*</text>
				</view>
				<view class="l-img" v-if="detail.work_images">
					<image :src="httpimg + item" mode="aspectFill" v-for="(item,index) in detail.work_images.split(',')"
						:key="item" @click="pimg(detail.work_images.split(','),index)"></image>
				</view>
			</view>
		</view>
		<view class="msg" v-if="detail.status==12 || detail.status==13">
			<view class="msg_list">
				<view class="m_left">
					物流公司
				</view>
				<view class="m_right">
					{{detail.express_company}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					物流单号
				</view>
				<view class="m_right">
					{{detail.express_no}}
				</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;">
		</view>
		<view class="bottom" v-if="detail.status==2">
			<view class="b_box">
				<view class="b_money">
					订单金额：<text>￥{{detail.allprice}}</text>
				</view>
				<view class="b_btn2" @click="toCancel">
					申请退款
				</view>
			</view>
		</view>
		<view class="bottom" v-if="detail.status==12">
			<view class="b_box">
				<view class="b_money">
					订单金额：<text>￥{{detail.allprice}}</text>
				</view>
				<view class="b_btn2" @click="over">
					确认收货
				</view>
			</view>
		</view>
		<view class="bottom" v-if="detail.status==3">
			<view class="b_box">
				<view class="b_money">
					订单金额：<text>￥{{detail.allprice}}</text>
				</view>
				<view class="b_btn2" @click="addAddress">
					完善信息
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="bottom" :round="10" closeable>
			<view class="pop-userinfo">
				<view class="p-title">
					完善收货信息
				</view>
				<view class="p-con">

					<view class="item">
						<view class="l">
							收件人姓名
						</view>
						<view class="r">
							<input type="text" class="weui-input" placeholder="请输入" v-model="name" />
						</view>
					</view>
					<view class="item">
						<view class="l">
							收件人电话
						</view>
						<view class="r">
							<input type="number" class="weui-input" placeholder="请输入" v-model="phone" />
						</view>
					</view>
					<view class="item">
						<view class="l">
							收件人地址
						</view>
						<view class="r">
							<input type="text" class="weui-input" placeholder="请输入" v-model="address" />
						</view>
					</view>
					<view class="item">
						<view class="l">
							作品编号
						</view>
						<view class="r">
							<input type="text" class="weui-input" placeholder="请输入" v-model="code" />
						</view>
					</view>
					<view class="item2">
						<view class="t">
							上传作品图片
						</view>
						<view class="b">
							<view class="i" v-for="(item,index) in imgs" :key="index">
								<image :src="httpimg + item" mode="aspectFill"></image>
								<view class="del" @click="imgs.splice(index,1)">
									×
								</view>
							</view>
							<view class="i" @click="upload">
								<image src="../../static/mine/tianjia.png" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="p-btn" @click="setAddress">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				phone: '',
				code: '',
				address: "",
				imgs: [],
				show: false,
				id: 0,
				mid: 0,
				type: 0,
				detail: '',
				http: this.$http,
				httpimg:this.$httpimg,
				arr: ['', '微信支付'],
				// status: ['已取消', '待付款', '待核销', '已使用', '申请退款', '已退款', '拒绝退款', '延时退款'],
				status: ['已取消', '待付款', '待核销', '制作中', '申请退款', '已退款', '拒绝退款', '延时退款', '待修坯', '待施釉', '待烧制', '待发货', '待收货',
					'已完成'
				], //状态:0=已取消,1=待付款,2=待兑换,3=制作中,4=申请退款,5=已退款,6=拒绝退款,7=延时退款,8=待修坯,9=待施釉,10=待烧制,11=待发货,12=待收货,13=已完成
			}
		},
		onLoad(o) {
			this.id = o.id
			this.mid = uni.getStorageSync('user').id
			this.getData()
		},
		onShareAppMessage(e) {
			return {
				title: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			pimg(list, index) {
				let urls = list.map(item => this.http + item)
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
			addAddress() {
				this.show = true
			},
			over() {
				uni.showModal({
					title: '温馨提示',
					content: '您确认收货吗?',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$post('user/ticketFinished', {
								mid: this.mid,
								order_id: this.id,
								status: 13
							}).then(r => {
								if (r.code == 0) {
									uni.showToast({
										title: '操作成功',
										mask: true
									})
									this.getData()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getData() {
				this.$post('user/ticketOrderDetail', {
					mid: this.mid,
					order_id: this.id
				}).then(res => {
					// // console.log(res)
					if (res.code == 0) {
						this.detail = res.data
					}
					if (res.code == -3) {
						uni.showToast({
							title: '用户不存在请重新登录',
							icon: 'none',
							mask: true
						})
						uni.clearStorage()
						setTimeout(() => {
							uni.switchTab({
								url: '../index/index'
							})
						}, 1200)
					}
					if (res.code == -4) {
						uni.showToast({
							title: '用户已被禁用',
							icon: 'none',
							mask: true
						})
						// uni.clearStorage()
						setTimeout(() => {
							uni.switchTab({
								url: '../index/index'
							})
						}, 1200)
					}
				})
			},
			setAddress() {
				if (!this.name || !this.phone || !this.code || !this.address || this.imgs.length == 0) {
					uni.showToast({
						title: '请完善信息',
						icon: 'none'
					})
					return
				}
				this.$post('user/ticketEdit', {
					mid: this.mid,
					order_id: this.id,
					receive_name: this.name,
					receive_mobile: this.phone,
					work_num: this.code,
					receive_address: this.address,
					work_images: this.imgs.toString()
				}).then(r => {
					if (r.code == 0) {
						uni.showToast({
							title: '操作成功',
							mask: true
						})
						this.show = false
						this.getData()
					}
				})
			},

			upload() {
				this.$uploads().then(r => {
					console.log(r)
					this.imgs = [...this.imgs, ...r]
				})
			},

			open() {
				this.show = true
			},
			close() {
				this.show = false
			},


			toCancel() {
				uni.showModal({
					title: '提示',
					content: '是否申请退款',
					success: (res) => {
						if (res.confirm) {
							this.$post('user/ticketOrderCancel', {
								mid: this.mid,
								order_id: this.id
							}).then(r => {
								if (r.code == 0) {
									uni.showToast({
										title: '申请成功',
										mask: true
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 1200)
								}
							})
						} else if (res.cancel) {
							// // console.log('用户点击取消');
						}
					}
				});
			},
			toDel() {
				uni.showModal({
					title: '提示',
					content: '是否取消订单',
					success: (res) => {
						if (res.confirm) {
							this.$post('user/ticketOrderCancelPay', {
								mid: this.mid,
								order_id: this.id
							}).then(r => {
								if (r.code == 0) {
									uni.showToast({
										title: '取消成功',
										mask: true
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1200)
								}
							})
						} else if (res.cancel) {
							// // console.log('用户点击取消');
						}
					}
				});
			},
			toPay() {
				uni.showLoading({
					title: '支付调起中..'
				})
				this.$post('user/ticketOrderPayV2', {
					mid: this.mid,
					order_id: this.id,
					from_type: 2
				}).then(res => {
					// // console.log(res)
					if (res.code == 0) {
						// let data = JSON.parse(res.data.Rtn_Par_Data)
						let data = res.data.acc_resp_fields
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.time_stamp,
							nonceStr: data.nonce_str,
							package: data.package,
							signType: data.sign_type,
							paySign: data.pay_sign,
							success: (res) => {
								uni.hideLoading()
								uni.showToast({
									title: '支付成功',
									mask: true
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1200)
							},
							fail: (err) => {
								uni.hideLoading()
								uni.showToast({
									title: '取消支付',
									mask: true
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1200)
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f7f7f7;
	}

	.pop-userinfo {
		padding: 30rpx;

		.p-title {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 32rpx;
			color: #333;
			text-align: center;
		}

		.p-con {
			margin-top: 80rpx;

			.item2 {
				.t {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 26rpx;
					color: #666;
				}

				.b {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.i {
						width: 180rpx;
						height: 180rpx;
						margin: 20rpx 20rpx 0 0;
						position: relative;

						.del {
							position: absolute;
							top: -10rpx;
							right: -10rpx;
							;
							width: 50rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							background-color: #FF7416;
							color: #fff;
							font-size: 36rpx;
							border-radius: 50%;
						}

						image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
							overflow: hidden;
							border: 2rpx solid #eee;
						}
					}
				}
			}

			.item {
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.l {
					font-size: 26rpx;
					color: #666;
					width: 160rpx;
				}

				.r {
					flex: 1;
					width: 1rpx;

					.weui-input {
						height: 80rpx;
						line-height: 80rpx;
						width: 100%;
						font-size: 28rpx;
						color: #666;
						border-bottom: 2rpx solid #eee;
					}
				}
			}

			.p-name {
				height: 80rpx;
				line-height: 80rpx;
				width: 100%;
				box-sizing: border-box;
				border: 2rpx solid #eee;
				padding: 0 20rpx;
				border-radius: 6rpx;
				margin: 40rpx auto 0;

			}


		}

		.p-btn {
			width: 75%;
			border-radius: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 80rpx auto 0;
			font-size: 28rpx;
			color: #fff;
			background-color: #FF7416;
			text-align: center;

		}
	}

	image {
		width: 100%;
		height: 100%;
	}

	.order {
		image {
			width: 100%;
			height: 100%;
		}

		.bottom {
			position: fixed;
			bottom: 0;
			z-index: 10;
			background-color: #FFFFFF;
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			/*兼容 IOS<11.2*/
			padding-bottom: env(safe-area-inset-bottom);

			.b_box {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;

				.b_money {
					font-size: 30rpx;
					color: #333333;
					font-weight: 500;
					display: flex;
					align-items: center;

					span {
						color: #FF7416;
						font-weight: 700;
					}

					text {
						font-size: 40rpx;
						font-weight: 700;
						color: #FF7416;
					}
				}

				.btns {
					display: flex;
					align-items: center;
				}

				.b_btn {
					height: 60rpx;
					line-height: 60rpx;
					opacity: 1;
					background: #FF7416;
					border-radius: 40rpx;
					text-align: center;
					color: #333333;
					font-size: 26rpx;
					font-weight: 500;
					color: #fff;
					padding: 0rpx 20rpx;
					margin-right: 10rpx;
				}

				.b_btn2 {
					height: 60rpx;
					line-height: 60rpx;
					opacity: 1;
					border: 1rpx solid #b4b4b4;
					border-radius: 40rpx;
					text-align: center;
					color: #666666;
					font-size: 26rpx;
					font-weight: 500;
					padding: 0rpx 20rpx;
				}
			}
		}

		.top {
			background-color: #FFFFFF;
			padding: 24rpx 34rpx;

			.top_t {
				font-size: 26rpx;
				font-weight: 700;
				color: #333333;
			}

	.top_content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		.c_left {
			display: flex;
			align-items: center;
			.l_img {
				width: 160rpx;
				height: 136rpx;
			}
		}
		.c_right {
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.l_text {
				margin-left: 14rpx;
				color: #333333;
			
				.text_top {
					font-size: 28rpx;
					font-weight: 700;
				}
			
				.text_bottom {
					color: #888888;
					font-size: 22rpx;
					margin-top: 20rpx;
				}
			}
			.c_money {
				width: 100%;
				font-size: 26rpx;
				text {
					font-size: 22rpx;
				}
			}
	
			.c_num {
				width: 100%;
				margin-top: 10rpx;
				font-size: 34rpx;
				text-align: right;
				text {
					font-size: 30rpx;
				}
			}
		}
	}
		}

		.msg {
			background-color: #FFFFFF;
			margin-top: 12rpx;
			padding: 0rpx 34rpx;

			.msg_list2 {
				padding-top: 32rpx;
				padding-bottom: 32rpx;

				.m_left {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 26rpx;
					color: #666666;
					font-weight: 500;

					text {
						color: #c33;
					}
				}

				.l-img {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					image {
						width: 80rpx;
						height: 80rpx;
						margin: 20rpx 20rpx 0 0;
					}
				}

			}

			.msg_list {
				padding-top: 32rpx;
				padding-bottom: 32rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #f5f5f5;

				.m_left {
					width: 150rpx;
					font-size: 26rpx;
					color: #666666;
					font-weight: 500;

					text {
						color: #c33;
					}
				}

				.m_right {
					font-size: 24rpx;
					font-weight: 700;
					color: #333333;
				}
			}

			.title {
				font-size: 30rpx;
				font-weight: 700;
				color: #333333;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
			}

			.code {
				width: 220rpx;
				height: 220rpx;
				margin: 0 auto;
				padding-top: 24rpx;
				padding-bottom: 52rpx;
			}
		}
	}
</style>